<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <!--    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"-->
    <!--          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"/>-->
    <!--    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>-->
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"/>
    <script th:src="@{/js/vue.js}"></script>


</head>
<body>

<div th:insert="publicHeader"/>
<script th:src="@{/js/publicHeader.js}"></script>


<div class="container-fluid" id="app" style="margin-top: 180px;margin-bottom: 100px">

    <div class="container">


        <div class="row">
            <div class="col-sm-6 col-md-4" v-for="product in productList">
                <div class="thumbnail">
                    <img :src="product.productimgsrc" alt="..." class="col-sm-6 col-md-6">
                    <div class="caption text-left">
                        <p>商品名:<span v-text="product.productname">name</span></p>
                        <p>价格:<span v-text="product.productprice">price</span></p>
                        <p>
                            <a class="btn btn-success" @click="addToCart(product.id)">加入购物车</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12 col-md-offset-5 col-lg-offset-4col-xl-offset-5">
                <ul class="pagination justify-content-center">
                    <li><a @click.prevent="go(currentPage1-1)">上一页</a></li>
                    <li><a v-for="num in totalPages" v-text="num" @click.prevent="go(num)">n</a></li>
                    <li><a @click.prevent="go(currentPage1+1)">下一页</a></li>

                </ul>
            </div>
        </div>

    </div>


</div>

<script>

    console.log(".........index...........")

    var context=new Vue({
        el: "#app"
        ,
        data: {
            currentPage1: 1,
            pageSIze1: 3,
            productList: [],
            totalPages: 0,
            totalRecords: 0,
            keywords1:""
        }
        ,
        methods: {
            initProductList() {
                this.keywords1=publicHeader._data.keywords
                //alert(this.keywords1);
                var param = {
                    "currentPage": this.currentPage1,
                    "pageSIze": this.pageSIze1,
                    "keywords":this.keywords1
                }
                var vueObj = this;
                $.post("/product/pageData", param, function (data) {
                    console.log(data)
                    vueObj.productList = data.records;
                    vueObj.totalPages = data.pages;
                    vueObj.totalRecords = data.total;
                })
            },
            go(page) {
                if (page > this.totalPages || page <1 || page == this.currentPage1) {
                    //如果当前页码大于总页码 或者小于1 或者就是当前页 不进行任何操作
                    console.log("无效的page值"+page);
                    return;
                }
                //修改currentPage 重新请求initProductList
                this.currentPage1=page;
                this.initProductList();
            },
            addToCart(prodectId){
                //进行登录判断
                if(!publicHeader._data.currentName){
                    alert("尚未登录，自动为您跳转到登录页面")
                    location.href="/login.html"
                    return;
                }
                $.post("/cart/addToCart",{prodectId:prodectId},function (data) {
                    if (data=="ok"){
                        alert("添加成功!")
                    }

                })
            }
        }
        ,
        created() {
            this.initProductList();
        }

    });


</script>


<div th:insert="publicFooter"/>
<script th:src="@{/js/publicFooter.js}"></script>


</body>
</html>